<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>修改用户</legend>
</fieldset>

<form id="myForm" action="/user?type=editUser" method="post">

    <input type="hidden" value="${user.userId}" class="form-control" name="userId" id="userId" >

    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="userName">用户名</label>
        <input type="text" value="${user.userName}" class="form-control" name="userName" id="userName"
               aria-describedby="inputWarning2Status" autocomplete="off">
    </div>
    <input type="hidden" value="${user.userPwd}" class="form-control" name="userPwd" id="userPwd"
           aria-describedby="inputWarning2Status" autocomplete="off">
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="userTel">手机号</label>
        <input type="text" value="${user.userTel}" class="form-control" name="userTel" id="userTel"
               aria-describedby="inputWarning2Status" autocomplete="off">
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="userEmail">邮箱</label>
        <input type="text" value="${user.userEmail}" class="form-control" name="userEmail" id="userEmail"
               aria-describedby="inputWarning2Status" autocomplete="off">
    </div>
    <label class="control-label" for="roleId">权限</label>
    <select id="roleId" name="roleId" class="form-control">
        <option value="${user.role.roleId}" selected>${user.role.roleName}</option>
        <c:forEach items="${roleList}" var="role">
            <c:if test="${role.roleId != 1}">
                <c:if test="${role.roleId != user.role.roleId}">
                    <option value="${role.roleId}">${role.roleName}</option>
                </c:if>
            </c:if>
        </c:forEach>
    </select>
    <hr>
    <button id="btn" type="button" class="btn btn-primary">修改</button>
</form>

<script>
    let myForm = $("#myForm");
    let btn = $("#btn");
    let userId = $("#userId");
    let userName = $("#userName");
    let userPwd = $("#userPwd");
    let userTel = $("#userTel");
    let userEmail = $("#userEmail");
    let roleId = $("#roleId")

    btn.on("click", function () {
        if (userName.val() === "") {
            alert("用户名不可为空！");
            return;
        } else {
            if (userTel.val() !== "" && userTel.val().length !== 11) {
                alert("手机号请输入正确格式");
                return;
            }
        }
        alert("校验用户名~");
        axios.get("/user?type=checkMyName", {
            params: {
                uid: userId.val(),
                uname: userName.val()
            }
        }).then(res => {
            if (res.data == null) {
                alert("修改成功");
                myForm.submit();
            } else {
                alert("该用户名已被使用，请修改！");
            }
        }).catch(error => {
            console.log("出错：" + error);
        });
    });
</script>

</body>
</html>
